<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        html,
        body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100vh;
            /* overflow: hidden; */
            /* background-image: url(./imgs/预览图_千图网_编号34715531.jpg); */
            background-repeat: no-repeat;
            background-size: cover;
            padding-top:60px ;
            box-sizing: border-box;
        }

        .outer {
            width: 80%;
            min-height: 100%;
            margin: 0 5% auto 15%;
            /* border: 2px solid #FFF; */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .box {
            width: 150px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            margin: 25px 15px;
            z-index: 1;
            color: white;
            font-family: sans-serif;
            box-sizing: border-box;
            border-radius: 30px;
            text-decoration: none;
            text-transform: uppercase;
            background-image: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            /* word-wrap: break-word; */
            overflow: hidden;
        }

        .box:hover {
            animation: bg 8s linear infinite;

        }

        @keyframes bg {
            0% {
                background-position: 0%;

            }

            100% {
                background-position: 400%;
            }
        }
        div.tit {
            width: 50px;
            height: 200px;
            line-height: 40px;
            text-align: center;
            font-size: 30px;
            color: rgb(34, 33, 33);
            position: fixed;
            left: 50px;
            top: 60%;
            z-index: 1;
            transform: translateY(-50%);
        }

        img {
            width: 120px;
            position: fixed;
            opacity: .8;
        }

        img.fish1 {
            right: -200px;
            top: 17%;
            z-index: 0;
            animation: f1 15s 1s linear infinite;
        }

        @keyframes f1 {
            0% {
                right: -200px;
                top: 25%;
            }

            60% {
                right: 60%;
                top: 55%;
            }

            100% {
                right: 100%;
                top: 15%;
            }
        }

        img.fish2 {
            right: -200px;
            top: 45%;
            animation: f2 15s 6s ease-out infinite;

        }

        @keyframes f2 {
            0% {
                right: -200px;
                top: 17%;
            }

            50% {
                right: 70%;
                top: 25%;
                transform: rotateY(0);

            }

            51% {
                right: 70%;
                top: 25%;
                transform: rotateY(180deg);

            }

            100% {
                right: -200;
                top: 20%;
                transform: rotateY(180deg);

            }
        }

        img.fish3 {
            left: -200px;
            top: 75%;
            animation: f3 20s 12s ease-out infinite;

        }

        @keyframes f3 {
            0% {
                left: -200px;
                top: 75%;
            }

            50% {
                left: 50%;
                top: 60%;
            }

            100% {
                left: 100%;
                top: 85%;
            }
        }

        img.fish4 {
            width: 50px;
            left: -200px;
            top: 50%;
            animation: f4 19s 19s ease-out infinite;
            transform: rotateY(180deg);
        }

        @keyframes f4 {
            0% {
                left: -200px;
                top: 50%;
            }

            50% {
                left: 70%;
                top: 40%;
                transform: rotateY(180deg);
            }

            51% {
                left: 70%;
                top: 40%;
                transform: rotateY(0);

            }

            100% {
                left: -200px;
                top: 50%;
                transform: rotateY(0);
            }
        }
    </style>
</head>

<body>
    <div class="tit">浅海拾贝</div>
    <img src="./imgs/红鱼.png" alt="" class="fish1">
    <img src="./imgs/海豚2.png" alt="" class="fish2">
    <img src="./imgs/蓝色小海豚.png" alt="" class="fish3">
    <img src="./imgs/黄鱼.png" alt="" class="fish4">
    <div class="outer">
        <a class='box' href="https://www.gqytv.com/" target="_blank">云影视</a>
        <a class='box' href="https://www.bilibili.com/" target="_blank">B站</a>
        <a class='box' href="https://www.ppt118.com/ppt" target="_blank">风云办公</a>
        <a class='box' href="http://www.imomoe.in/" target="_blank">樱花动漫</a>
        <a class='box' href="http://www.fengchedm.com/" target="_blank">风车动漫</a>
        <a class='box' href="https://www.baidu.com/" target="_blank">百度</a>
        <a class='box' href="http://www.ferecord.com/lujs-object.html" target="_blank">前端记录</a>
        <a class='box' href="http://www.aigei.com/s" target="_blank">爱给音效</a>
        <a class='box' href="https://zhutix.com/" target="_blank">致美素材库</a>
        <a class='box' href="http://huatu.xuanheng05.cn/swdt/" target="_blank">思维导图</a>
        <a class='box' href="https://docschina.org/" target="_blank">印记中文</a>
        <a class='box' href="https://cubic-bezier.com/#.17,.67,.83,.67" target="_blank">贝塞尔曲线</a>
        <a class='box' href="https://gitee.com/nevermo2013/YouDontKonwJS" target="_blank">你不知道的js</a>
        <a class='box' href="https://fontawesome.dashgame.com/" target="_blank">FA矢量</a>
        <a class='box' href="https://www.jquery123.com/find/" target="_blank">jQ文档</a>
        <a class='box' href="https://www.dowebok.com/131.html" target="_blank">wow.js</a>
        <a class='box' href="https://www.jq22.com/jquery-info819" target="_blank">animate.css</a>
        <a class='box' href="https://www.animejs.cn/demo/" target="_blank">anime.js</a>
        <a class='box' href="http://www.htmleaf.com/css3/css3donghua/201501091143.html" target="_blank">hover.css</a>
        <a class='box' href="https://www.dowebok.com/134.html" target="_blank">scrollReveal</a>
        <a class='box' href="https://www.jq22.com/jquery-info2754" target="_blank">Magic.CSS3</a>
        <a class='box' href="http://www.yyyweb.com/demo/waves/index.html" target="_blank">waves</a>
        <a class='box' href="http://shouce.jb51.net/velocity/feature.html" target="_blank">Velocity.js</a>
        <a class='box' href="https://developer.mozilla.org/zh-CN/" target="_blank">MDN查询</a>
        <a class='box' href="https://juejin.im/" target="_blank">掘金</a>
        <a class='box' href="https://www.bootcss.com/" target="_blank">Bootstrap</a>
        <a class='box' href="https://www.swiper.com.cn/" target="_blank">Swiper</a>
        <a class='box' href="https://segmentfault.com/" target="_blank">思否</a>
        <a class='box' href="http://www.bitbug.net/" target="_blank">比特虫</a>
        <a class='box' href="http://nodejs.cn/api/" target="_blank">nodejs文档</a>
        <a class='box' href="https://www.cnblogs.com/" target="_blank">博客园</a>
        <a class='box' href="https://imgchr.com/" target="_blank">图床</a>
        <a class='box' href="https://tinypng.com/" target="_blank">熊猫压缩</a>
        <a class='box' href="https://www.bejson.com/ui/compress_img/" target="_blank">图片压缩</a>
        <a class='box' href="https://greasyfork.org/zh-CN" target="_blank">油猴脚本</a>
        <a class='box' href="https://design.alipay.com/emotion/editor" target="_blank">犸良</a>
    </div>
</body>

</html>